jQueryからVanilla JSへの書き換え

DOM要素の取得

id での取得

code:jquery.js

$("#foo")

code:vanilla.js

document.getElementById("foo")

クラス名での取得

code:jquery.js

$(".foo")

code:vanilla.js

document.getElementsByClassName("foo")

CSS セレクタでの取得

code:jquery.js

$(".foo li.bar")

code:vanilla.js

// 先頭の1つのみ

document.querySelector(".foo li.bar")

// 複数

document.querySelectorAll(".foo li.bar")

オブジェクトへのプロパティの追加(オブジェクトの結合)

code:jquery.js

ES6 以降は、以下のいずれかを使う

class とその extends

Object.assign(target, object);

ただしディープコピーはできない。

最近、structuredClone 関数が実装された。